<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>晚宴抽奖</title>
		<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
		<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
		<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/stone.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.main{
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20px;
				height: 500px;
				border: 1px solid #ccc;
				position: relative;
				padding-top: 50px;
			}
			.body{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 100%;
				padding: 100px 0 100px 100px;
			}
			.play{
				width:100px;
				height: 100px;
				border: none;
				border-radius: 50px;
				background-color: red;
				outline: none;
				color: white;
			}
			.foot{
				position: absolute;
				bottom: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-evenly;
			}
			.foot button{
				margin: 20px;
			}
			.addPrize{
				width:80px;
				height: 80px;
				border-radius: 50px;
				font-size: 10px;
				border: none;
				background-color: green;
				color: white;
				outline: none;
			}
		</style>
	</head>
	<body>
		<div class="main" id="vue">
			<div class="head">
				<div class="title">抽奖</div>
			</div>
			<div class="body">
				<div>中奖等级：{{prize.name }}</div>
				<div>奖品数量：{{prizeNum }}</div>
				<div>中奖用户：{{prizeUser.name}}</div>
			</div>
			<div class="foot">
				<button class="play" :style="{'box-shadow':playFlag?'0px 0px 5px #666':'5px 5px 5px #666'}" @click="playClick">PLAY</button>
				<button @click="addPrize" :style="{'box-shadow':addFlag?'0px 0px 5px #666':'5px 5px 5px #666'}" class="addPrize">增加奖项</button>
			</div>
		</div>
		<script type="text/javascript">
			let vue=new Vue({
				el:'#vue',
				data:{
					prize:new Object(),//奖项信息
					allUser:[],//所有用户
					prizeUser:new Object(),//中奖用户
					prizeNum:0,//奖品数量
					playFlag:false,//抽奖按钮状态
					timer:new Object(),//定时器
					random:0,//中奖随机数
					prizeFlag:true,//抽奖状态
					addFlag:false,//增加奖项按钮
				},
				created() {
					//获取地址栏参数
					this.prize.name = STONE.getRequest()["name"];
					this.prizeNum = STONE.getRequest()["num"];
					//获取参与用户
					Api.get_user().then(res=>{
						if(res.code==200){
							this.allUser=res.result;
							if(this.allUser.length<this.prizeNum){
								this.$Message.error('参与用户不足'+this.prizeNum+'!');
							}
							console.log(this.allUser);
						}
					})
				},
				methods:{
					//添加奖项
					addPrize(){
						this.prizeNum++;
						this.addFlag=true;
						setTimeout(()=>{
							this.addFlag=false;
							return;
						},200)
					},
					//点击抽奖按钮
					playClick(){
						if(!this.prizeFlag){
							this.$Message.error('参与用户不足!');
							// alert('参与用户不足!');
							return;
						}
						if(this.prizeNum<=0){
							this.$Message.error("奖品数量不足！");
							return
						}
						console.log(this.allUser);
						if(this.allUser.length==1){
							clearInterval(this.timer);
							this.prizeNum=this.prizeNum-1;//奖品数量-1
							this.prizeFlag=false;
							setTimeout(()=>{
								this.playFlag=false;
								return;
							},500)
						}
						this.playFlag=this.playFlag?false:true;
						let arr=this.allUser;
						if(!this.playFlag){
							this.prizeNum=this.prizeNum-1;
							this.allUser.splice(this.random,1);//从抽奖用户中剔除中奖人
							clearInterval(this.timer);
							return;
						}
						//中奖人筛选
						this.timer=setInterval(()=>{
							this.random=Math.floor(Math.random()*arr.length);//生成中奖随机数
							this.prizeUser=arr[this.random];//筛选中奖人
						},100)
					}
				}
			})
		</script>
	</body>
</html>
